<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.实战（一）：如何使用图表库绘制常用数据图表-QCharts 绘制雷达图、仪表盘和玉玦图、南丁格尔玫瑰图</title>
    <style>
        #app{
            border:1px solid #ccc;
            width:500px;
            height:500px;
        }
    </style>
</head>
<body>
    <p>
        qcharts图表由图表（chart）对象及其子元素构成。其中图表对象的子元素包含图形（Visual）和其他插件（Plugin）。图形是必选元素，其他的插件都是可选元素
    </p>
    <div id="app"></div>

    <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
    <script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script>

    <script type="module">
        // Line->Area：折线图-折线面积图
        // Bar-柱状图
        const { Chart, Radar, Axis, Legend, Tooltip, Gauge } = qcharts;

        // 1.创建图表对象
        const chart = new Chart({
            container:"#app"
        });

    // 一、雷达图

        // 2.创建完图表对象之后，就绑定数据
        
        // const data = [
        //     { date: '体力', category: '诸葛亮', sales: 100 },
        //     { date: '武力', category: '诸葛亮', sales: 69 },
        //     { date: '智力', category: '诸葛亮', sales: 100 },
        //     { date: '统帅', category: '诸葛亮', sales: 95 },
        //     { date: '魅力', category: '诸葛亮', sales: 95 },
        //     { date: '忠诚', category: '诸葛亮', sales: 100 },
        // ];

        // // chart.source方法进行数据绑定。并且可以设置数据的行、数值、文本等，这些设置会被图形或其他插件使用
        // chart.source(data,{
        //     row:"category", // 指定数据的行
        //     value:"sales", // 指定数据的数值
        //     text:"date", // 指定数据的文本
        // });

        // // 3.指定图形对象(面积图)
        // const radar = new Radar();
        // radar.style('section', (d) => ({ opacity: 0.3 }));
        
        // // 4.添加插件，实现坐标轴、图例等
        // // 4.3添加图例
        // const legend = new Legend({ align: ['center', 'bottom'] });
        // // 4.4添加提示条
        // const tooltip = new Tooltip();

        // // 5.添加到 chart 对象的子元素中去(显示)
        // chart.append([ radar, legend, tooltip ]);

    // 二、仪表盘
        const gauge = new Gauge({
            min: 0,
            max: 100,
            percent:60,
            lineWidth: 20,
            tickStep: 10
        });
        gauge.style('title', { fontSize: 36 });
        chart.append(gauge);

    </script>
</body>
</html>